<template>
    <div class="learn-process-container">
        <div class="white-bg operation-container">
            <a-progress type="circle" :percent="percent" strokeColor="#7657F0" :strokeWidth="10">
                <template #format="percent">
                    <span>学习进度<br/></span>
                    <span class="purple-text">{{ percent }}%</span>
                </template>
            </a-progress>
<!--            <div class="operation-item">已学习<br/><span class="purple-text">{{learnDay}}天</span></div>-->
            <div class="operation-item">讨论问题<br/><span class="purple-text">{{questionNum}}</span></div>
            <div class="operation-item">回复我<br/><span class="purple-text">{{replyNum}}</span></div>
          <div class="operation-item">未浏览<br/><span class="purple-text">{{nobrowsedNum}}</span></div>


        </div>
    </div>


</template>

<script>
  /* eslint-disable */
  export default {
	name: "",
    props:{
	  percent:{
	    type:Number,
        default:75
      },
      learnDay:{
	    type: Number,
		default:75
      },
      questionNum:{
	    type:Number,
		default:75
      },
      replyNum:{
	    type:Number,
		default:75
      },
      nobrowsedNum:{
        type:Number,
        default:75
      }
    },
	methods:{
	  goIesPlan(){
		this.$router.push("/home");
	  }
	}
  }
</script>

<style lang="less"  scoped>
    @import "./../../../../styles/global.less";
    .learn-process-container{
        .white-bg {
            background-color: white;
            border-radius: 2px;
            padding: 20px;
        }
        .operation-container {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            justify-content:space-around;
            font-size:14px;
            .purple-text{
                color: #7657F0;
                font-weight: bold;
                font-size:16px;
            }
            .purple-sub-text{
                color: #C6BCF2;
                font-size: 12px;
            }
            .operation-item {
                text-align: center;

            }

        }
    }
</style>
